<template>
    <div>
        <div @click="openEdit">
            <header_moban_1 :title="row.title"></header_moban_1>
            <div class="resume_content_main">
                <div class="flex-wrap flex-justify-between flex-start">
                    <div class="f-14 grid-clumn-2">
                        <div class="l-h-24" v-for="(item, index) in row.list" :key="index">
                            <span>{{ item.label }}</span
                            >：<span>
                                {{ item.value }}
                            </span>
                        </div>
                    </div>
                    <img v-if="row.avatar" class="user-avtor m-l-30" :src="row.avatar" />
                </div>
            </div>
        </div>

        <DialogForm
            v-if="visable"
            v-model="visable"
            title="编辑"
            width="1000px"
            auto
            :grid="2"
            :formConfig="formConfig"
            :formData="formData"
            :rules="rules"
            @confirm="confirm"
        >
            <template slot="avatar">
                <avtorUpload v-model="formData.avatar" />
            </template>
            <template slot="list">
                <div
                    class="flex-center-wrap m-t-18"
                    v-for="(item, index) in formData.list"
                    :key="index"
                >
                    <el-input class="w-220" v-model="item.label" :maxlength="100"></el-input>：
                    <el-input v-model="item.value" :maxlength="100"></el-input>
                    <el-button class="m-l-20" type="primary" @click="addItem(index)"
                        >+add</el-button
                    >
                    <el-button class="m-l-10" type="danger" @click="delItem(index)">+del</el-button>
                </div>
                <div class="flex-center" v-if="!formData.list">
                    <el-button type="primary" @click="addItem(null)">+add</el-button>
                </div>
            </template>
        </DialogForm>
    </div>
</template>

<script>
export default {
    components: {
        header_moban_1: () => import('@/components/bn/headerPages/moban_1.vue'),
        'e-form': () => import('@/components/async/e-form.vue'),
        avtorUpload: () => import('@/components/async/avtorUpload.vue'),
    },
    props: {
        row: {
            type: Object,
            default() {
                return {
                    title: '',
                    avatar: '',
                    list: [],
                }
            },
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            visable: false,

            formConfig: [
                {
                    label: '模块名',
                    type: 'input',
                    modelName: 'title',
                },
                {
                    label: '头像',
                    type: 'customInput',
                    slot: 'avatar',
                    grid: 2,
                },
                {
                    label: '内容区',
                    type: 'customInput',
                    slot: 'list',
                    grid: 2,
                },
            ],
            formData: {
                list: [],
            },
            rules: {
                title: [{ required: true, message: '请输入模块名名字', trigger: 'blur' }],
            },
        }
    },
    created() {
        if (this.row.is_need_default) {
            const defaultval = {
                title: '基本信息',
                avatar: 'https://www.qmjianli.com/img/resume/online/photo/24417ZSKVFAGV9F.jpg?code=1731760660698',
                list: [
                    {
                        label: '姓　　名',
                        value: ' 张三',
                    },
                    {
                        label: '性　　别',
                        value: '男',
                    },
                    {
                        label: '工作年限',
                        value: '2年经验',
                    },
                    {
                        label: ' 求职岗位',
                        value: ' web前端',
                    },
                    {
                        label: '电　　话',
                        value: '17726331933',
                    },
                    {
                        label: ' 邮　　箱',
                        value: '1925541538@qq.com',
                    },
                    {
                        label: '入职时间',
                        value: '一周内到岗',
                    },
                    {
                        label: '求职岗位',
                        value: '前端开发工程师',
                    },
                    {
                        label: '学　　历',
                        value: '体校·田径小队·本科',
                    },
                ],
            }
            for (const key in defaultval) {
                this.$set(this.row, key, defaultval[key])
            }
        }
        this.$emit('loadSuccess', {
            row_code: this.row.row_code,
        })
    },
    methods: {
        openEdit() {
            this.formData = this.deepCopy(this.row)
            this.visable = true
        },
        confirm() {
            this.$emit('update', {
                info: this.formData,
            })
            this.visable = false
        },
        addItem(index) {
            if (!Array.isArray(this.formData.list)) {
                this.$set(this.formData, 'list', [])
            }
            if (typeof index === 'number') {
                this.formData.list.splice(index + 1, 0, { label: '', value: '' })
            } else {
                this.formData.list.push({ label: '', value: '' })
            }
        },
        delItem(index) {
            this.formData.list.splice(index, 1)
        },
    },
}
</script>

<style lang="scss" scoped>
.grid-clumn-2 {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 10px;
}
.resume_content_main {
    padding: 14px 20px;
}
.user-avtor {
    width: 98px;
    height: 114px;
    object-fit: cover;
}
.flex-start {
    align-items: flex-start;
}
</style>
